import React, { useEffect, useState } from 'react';
import Header from '../Header/Header';
import Main from '../Main/Main';
import Footer from '../Footer/Footer';
import './index.css';
import { nanoid } from 'nanoid';

export default function TodoList() {
  // 数据列表
  const [todos, setTodos] = useState(() => {
    // 尝试从 localStorage 中读取 todos 数据
    const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    return savedTodos;
  });

  // 添加列表
  function addTodo(title) {
    let todo = {
      id: nanoid(),
      title,
      isDone: false
    };
    setTodos([...todos, todo]);
  }

  // 删除列表
  function deleteTodo(id) {
    if (!window.confirm('确定要删除吗？')) return;
    setTodos(todos.filter(todo => todo.id !== id));
  }

  // 修改单条todo的状态
  function checkOne(id) {
    setTodos(todos.map(item => {
      if (item.id === id) {
        item.isDone = !item.isDone;
      }
      return item;
    }));
  }

  // 删除已经完成的事项
  function deleteDone() {
    if (!window.confirm('确定要删除完成的项目吗？')) return;
    setTodos(todos.filter(item => !item.isDone));
  }

  // 全选反选
  function checkAll(isDone) {
    setTodos(todos.map(item => {
      item.isDone = isDone;
      return item;
    }));
  }

  // 监听 todos 状态的变化，并在变化后更新 localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  return (
    <>
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={addTodo}></Header>
          <Main todos={todos} deleteTodo={deleteTodo} checkOne={checkOne}></Main>
          <Footer todos={todos} checkAll={checkAll} deleteDone={deleteDone}></Footer>
        </div>
      </div>
    </>
  );
}